<template>
	<view class="content">
		<view class="drop" v-show="clickShow">
			<view class="shape"></view>
			<view class="dropItem">
				<image src="../../static/tabimg/mima.png" class="imgCode"></image>
				<view @tap="changepass">修改密码</view>
			</view>
			<view class="dropItem">
				<image src="../../static/tabimg/tuichu.png" class="imgCode2"></image>
				<view @tap="close">退出应用</view>
			</view>
		</view>
		<view class="uni-tab-bar">
			<!-- 主体导航 -->
			<swiper class="swiper" :indicator-dots="true" indicator-color="#C1C2C6" indicator-active-color="#134199">
				<swiper-item class="Roughing">
					<view class="stovebox">
						<view class="itemhead num">道次R11</view>
						<view class="itemMain">
							<view class="itemMain-body">
								<view class="bodyitem" v-for="(item,k) in row" :key="k" :class="(k%2==0)?'' : 'addcol'">
									<view class="parameterTitle">{{item.name}}</view>
									<view class="parameterNum">{{item.id}}</view>
									<view class="titleinfo unit">{{item.unit}}</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="Roughing">
					<view class="stovebox">
						<view class="itemhead num">宽度/温度实测</view>
						<view class="itemMain">
							<view class="itemMain-body">
								<view class="bodyitem midtitle">宽度信息:</view>
								<view class="bodyitem" v-for="(item,index) in wideinfo" :key="index" :class="(index%2==0)?'' : 'addcol'">
									<view>{{item.name}}</view>
									<view class="titleinfo">{{item.id}}</view>
									<view class="titleunit">{{item.unit}}</view>
								</view>
								<view class="bodyitem midtitle">温度信息:</view>
								<view class="bodyitem" v-for="(item,index) in wideinfo" :key="index" :class="(index%2==0)?'' : 'addcol'">
									<view>{{item.name}}</view>
									<view class="titleinfo">{{item.id}}</view>
									<view class="titleunit">{{item.unit}}</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="Roughing">
					<view class="stovebox">
						<view class="itemhead num">1#轧辊数据</view>
						<view class="itemMain">
							<view class="itemMain-body">
								<view class="bodyitem midtitle">工作辊:</view>
								<view class="bodyitem" v-for="(item,index) in wideinfo" :key="index" :class="(index%2==0)?'' : 'addcol'">
									<view>{{item.name}}</view>
									<view class="titleinfo">{{item.id}}</view>
									<view class="titleunit">{{item.unit}}</view>
								</view>
								<view class="bodyitem midtitle">立辊:</view>
								<view class="bodyitem" v-for="(item,index) in wideinfo" :key="index" :class="(index%2==0)?'' : 'addcol'">
									<view>{{item.name}}</view>
									<view class="titleinfo">{{item.id}}</view>
									<view class="titleunit">{{item.unit}}</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>	
	</view>	

</template>

<script>
	import { mapState , mapMutations } from 'vuex';
	export default{
		data(){
			return{
				clickShow:false,
				wideinfo:[
					{
						name: '头部',
						id: '00',
						unit: '[mm]'
					},
					{
						name: '中部',
						id: '00',
						unit: '[mm]'
					},
					{
						name: '长度',
						id: '00',
						unit: '[mm]'
					}
				],
				row: [
					{
						name: '板坯号',
						id: 'A82005220400',
						unit: '/'
					},{
						name: '钢种',
						id: 'HQ235B',
						unit: '/'
					},{
						name: '坯厚',
						id: 230,
						unit: '[mm]'
					},
					{
						name: '坯宽',
						id: 1510,
						unit: '[mm]'
					},
					{
						name: '坯长',
						id: 15100,
						unit: '[mm]'
					},
					{
						name: '炉时',
						id: 814859,
						unit: '/'
					},
					{
						name: '产品厚度',
						id: 7.5,
						unit: '[mm]'
					},
					{
						name: '产品宽度',
						id: 1500,
						unit: '[mm]'
					},
					{
						name: '目标厚度',
						id: 7.5,
						unit: '[mm]'
					},
					{
						name: '目标宽度',
						id: 1500,
						unit: '[mm]'
					},
					{
						name: '装炉时刻',
						id: '2018-02-01/11:48:32',
						unit: ''
					},
				],
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
		methods:{
			//导航栏关闭应用事件
			...mapMutations(['logout']),
			close(){
				let _self = this;
				uni.showModal({
					title: '退出登录',
					content: '确定要退出吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_self.logout();
							// #ifdef APP-PLUS  
							plus.runtime.quit();
							// #endif 
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			changepass(){
				uni.navigateTo({
					url:'/pages/changepass/changepass'
				})
			},
			//回退
			clickLeft(){
				uni.navigateBack({
				    delta: 1,
				    animationType: 'pop-out',
				    animationDuration: 200
				});
			}
		},
		onLoad(val) {
			console.log(val)
		},
		onNavigationBarButtonTap(e) {
			if(e.float=="right"){
				this.clickShow = !this.clickShow;
			}
		},
		
	}
</script>

<style>
	.stovebox{
		background: #f2f2f2;
		height: 100%;
		border-radius: 25upx;
	}
	.num{
		color: #134199;
		border-bottom: 2upx solid #C1C2C6;
		box-sizing: border-box;
	}
	.unit{
		color: #505153;
		width: 10%;
	}
	.parameterTitle{
		width: 40%;
	}
	.parameterNum{
		width: 50%;
		color: #134199;
	}
</style>


